<template>
  <div>
    <div class="w-footer">
      <div class="w-xfoot" >
        <ul>
          <li v-for="(item,index) in arr" :key="index" @click="change(index)" >
            <i :class="cla[index]"></i>
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Footer',
    data(){
        return{
            // 底部切换
        arr:this.$store.state.arr,
        til:this.$store.state.sort,
        clas:['w-list2','w-list3','a3','w-list4','w-list5'],
        cla:['a1','a2','a3','a4','a5'],
        }
    },
    methods:{
         // 底部切换
      change(index){
        this.cla = ['a1','a2','a3','a4','a5'];
        for (var i = 0; i < this.arr.length; i++) {
          this.$set(this.cla,i,this.cla[i]);
        }
        this.$set(this.cla,index,this.clas[index]);
        if(index==3){
           this.$router.replace('/shoppings');
        }else if(index==0){
          this.$router.replace('/');
        }else if(index==4){
          this.$router.replace('/login');
        }else if(index==1){
          this.$router.replace('/class');
        }else if(index==2){
          this.$router.replace('/duanhuowang');
        }
      },
    },
    mounted(){
      var href = window.location.href.split('#')[1];
      switch (href) {
          case '/shoppings':
          this.$set(this.cla,3,this.clas[3]);
          break;
          case '/':
          this.$set(this.cla,0,this.clas[0]);
          break;
          case '/login':
          this.$set(this.cla,4,this.clas[4]);
          break;
          case '/class':
          this.$set(this.cla,1,this.clas[1]);
          break;
          case '/duanhuowang':
          this.$set(this.cla,2,this.clas[2]);
          break;
      }
    }
}
</script>

<style  scoped>
/* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
  background: #fff;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;
}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;  
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
}
.w-xfoot ul li:nth-child(1) .a1{
  background: url(../../assets/user/bottom1.png) no-repeat -5.6rem 0;
}
.w-xfoot ul li:nth-child(2) .a2{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) .a3{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul li:nth-child(4) .a4{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul li:nth-child(5) .a5{
  background: url(../../assets/user/bottom5.png) no-repeat -5.8rem 0;
}
/* 底部 */
/* list2 */
.w-xfoot ul .w-list2{
  background: url(../../assets/user/bottom1.png) no-repeat 0 0;
}
.w-xfoot ul .w-list3{
  background: url(../../assets/user/bottom2.png) no-repeat 0 0;
}
.w-xfoot ul .w-list4{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat 0 0;
}
.w-xfoot ul .w-list5{
  background: url(../../assets/user/bottom5.png) no-repeat 0.2rem 0;
}
</style>